<template>
	<div class='invite'>
		<h3 class='invite-name'>邀请有奖</h3>
		
        <p class='invite-title' style='margin: 35px 0 30px'>邀请好友送100元优惠券，可叠加使用</p>
        <div class='invite-img'>
            <img src="../../../images/invite.png">
            <div class='invite-money'>{{coupon_money}}</div>
            <div class='invite-btn' @click='getCoupon'>立即领取</div>     
        </div>
        <p class='invite-title-sub'>通过邮件邀请，输入好友的电子邮箱，邮箱之间用英文逗号隔开</p>
        <Input style='width:500px;margin: 18px 0 24px' class='invite-input' placeholder='请输入好友邮箱号' v-model='mails'>
            <span slot="append" style='display:flex;' @click='sendMails'>
                <i class='iconfont icon-mailbox icon-invite'></i>
                <span style="">发送邮件</span>
            </span>
        </Input>
        <p class='invite-title-sub'>复制链接邀请好友</p>
        <Input style='width:500px;margin: 18px 0 60px' class='invite-input' disabled :placeholder='copyData'>
            <span slot="append" style='display:flex;' v-clipboard="copyData" @success="handleSuccess" @error="handleError">
                <i class='iconfont icon-link icon-invite'></i>
                <span style='float:left'>复制链接</span>
            </span>
        </Input>
        <p class='invite-title' style='margin-bottom:26px'>我邀请的好友</p>
        <div class='invite-avater-box'>
            <div class='invite-avaters' v-if='inviters.length'>
                <div v-for='item in inviters' :key='item' class='invite-avaters-div'>
                    <div class='invite-avaters-img'>
                        <img v-lazy="getAvater(item.user.avater)" style='width:100%;height: 100%'>
                    </div>
                    <div class='invite-avaters-name'>{{item.user.nickname}}</div>
                </div>
                <div v-for='item in 12' style='width:80px;margin-right: 50px'></div>
            </div>
            <div class='invite-no' v-else>
                暂无邀请好友
            </div>
        </div>
        <p class='invite-title' style='margin:60px 0 20px'>活动规则</p>
        <div class='invite-rule'>1、每成功邀请一个人即获得100元优惠券，优惠券可叠加生成。</div>
        <div class='invite-rule'>2、优惠券有效期3个月。</div>
        <div class='invite-rule'>3、当前优惠券只可用于购买特权功能。</div>
        <div class='invite-rule'>4、本活动最终解释权归青否云所有。</div>
	</div>
</template>

<script type="text/javascript">
	export default{
		data(){
			return{
                coupon_money:0,
                mails:'',
                copyData: 'http://dev.qingful.com',
                inviters:[]
			}
		},
		created(){
            this.getInviter();
            this.getLink();
            this.getCouponPrice()
		},
        methods:{
            getCouponPrice(){
                this.fetch('/home/reward').then(res=>{
                    if(res&&res.data.data){
                        this.coupon_money = res.data.data.coupon_price;
                    }
                })
            },
            //领取优惠券
            getCoupon(){
                // if(!this.coupon_price){
                //     this.$Message.warning('暂时无优惠券可领取')
                //     return
                // }
                this.fetch('/home/useCoupon',{}).then(res=>{
                    if(res&&res.data.data){
                        this.$Message.success('领取成功')
                        this.getCouponPrice()
                    }
                })
            },
            //复制链接邀请好友
            getLink(){
                this.fetch('/home/invitUrl').then(res=>{
                    if(res&&res.data.data){
                        this.copyData = res.data.data;
                    }
                })
            },
            //邀请的好友
            getInviter(){
                this.fetch('/home/myInviter').then(res=>{
                    if(res&&res.data.data){
                        this.inviters = res.data.data;
                    }
                })
            },
            //发送邮件
            sendMails(){
                if(!this.mails){
                    this.$Message.warning('请输入邮箱号')
                    return
                }
                this.fetch('/home/sendEmail',{
                    mails:this.mails
                }).then(res=>{
                    if(res&&res.data.data){
                        this.$Message.success('发送成功')
                        this.mails = '';
                    }
                })

            },
            //复制链接
            handleSuccess(e) {
                this.$Message.success('复制成功')
            },
            handleError(e) {
                this.$Message.success('复制失败')
            },
        }
	}
</script>
<style scoped>
    .invite{
        background:#fff;
        padding:50px;
        line-height: 1
    }
    .invite-name{
        font-size:18px;
        color:#464C5B;
        margin-bottom: 40px;
    }
    .invite-title{
        font-size:18px;
        color:#464C5B;
    }
    .invite-img{
        position: relative;
        width: 308px;
        height: 218px;
        margin-bottom: 30px;
        margin-left: 20px;
    }
    .invite-money{
        position: absolute;
        top:30px;
        left: 110px;
        font-size:72px;
        font-weight: 500;
        color:#f84548;
        min-width: 100px;
        text-align: center
    }
    .invite-btn{
        width:120px;
        height:30px;
        border-radius: 15px;
        font-size: 18px;
        color:#f9514b;
        background: rgba(255,255,255,1);
        position: absolute;
        bottom: 12px;
        left: 50%;
        margin-left: -60px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;

    }
    .invite-btn:hover{
        /*background: rgba(255,255,255,1);*/
        /*background: #fffaf5;*/
    }
    .invite-title-sub{
        font-size: 14px;
        color: #657180;
    }
    .icon-invite{
        font-size:22px;
        margin-left: 14px
    }
    .invite-avater-box{
        width:100%;
        min-height: 200px;
        background: rgba(255,249,242,0.5);
        border: 2px solid #F6E7D2;
        border-radius: 10px;
        padding:42px 0 26px 42px;
        
    }
    .invite-avaters{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
    .invite-avaters-div{
        margin-right: 50px;
        margin-bottom: 24px
    }
    .invite-avaters-img{
        width:80px;
        height:80px;
        border-radius: 50%;
        overflow: hidden
    }
    .invite-avaters-name{
        width:80px;
        font-size:13px;
        color:#657180;
        text-align: center;
        margin-top: 14px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .invite-no{
        font-size: 18px;
        color:#EFD7B0;
        text-align: center;
        line-height: 116px;
        padding-right: 42px;
    }
    .invite-rule{
        font-size: 14px;
        color:#657180;
        line-height: 22px;
    }
</style>
<style type="text/css">
    .invite-input .ivu-input-group-append{
        width:120px;
        background: #fff;
        color: #657180;
        font-size: 12px;
        cursor:pointer;
        line-height: 16px
    }
    .invite-input .ivu-input-group-append:hover{
        color: #06a0fd;
        border-color: #06a0fd
    }
    .invite-input .ivu-input-group-append:hover{
        color: #06a0fd;
        border-color: #06a0fd;
        border-left:1px solid #06a0fd;
    }
</style>
